import React, { PureComponent } from 'react';
import { Card, Form, Input, Select, Button, Cascader, InputNumber, DatePicker } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import axios from 'axios';
import moment from 'moment';
import { connect } from 'dva';
const FormItem = Form.Item;
const options = [];
const Option = Select.Option;
@connect(({ card, loading }) => ({
  card: card.currentCard,
  cardLoading: loading.effects['card/getCardlist'],
}))
@Form.create()
export default class UsersAdd extends PureComponent {
  /* onChange=(date, dateString)=>{
    console.log(date, dateString);
  } */
  state = {
    confirmDirty: false,
    autoCompleteResult: [],
  };
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'users/create',
          payload: values,
        });
      }
    });
  };
  handleConfirmBlur = e => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const { autoCompleteResult } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    return (
      <PageHeaderLayout
        title="系统用户添加"
        content="系统用户添加添加页用于添加用户信息，用户信息添加页常见于数据项基本的全面信息添加场景。"
      >
        <Card>
          <Form onSubmit={this.handleSubmit}>
            <FormItem {...formItemLayout} label="id">
              {getFieldDecorator('id', {
                rules: [
                  {
                    required: true,
                    message: '请输入id',
                  },
                ],
              })(<Input placeholder="id" />)}
            </FormItem> 
            <FormItem {...formItemLayout} label="用户账号">
              {getFieldDecorator('account', {
                rules: [
                  {
                    required: true,
                    message: '请输入用户账号',
                  },
                ],
              })(<Input placeholder="请输入用户账号" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="用户角色">
              {getFieldDecorator('role', {
                rules: [
                  {
                    required: true,
                    message: '请输入用户角色',
                  },
                ],
              })( <Select placeholder="选择用户角色">
                    <Option value="普通用户">普通用户</Option>
                    <Option value="普通管理员">普通管理员</Option>
                    <Option value="超级管理员">超级管理员</Option>
                  </Select>)}
            </FormItem>
            <FormItem {...formItemLayout} label="用户密码">
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: '请输入用户密码',
                  },
                ],
              })(<Input placeholder="请输入用户密码" />)}
            </FormItem>
            <FormItem {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit">
                确定添加
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
